<template>
    <view class="my-multiple-select">
        <view class="input" @click="show = true">
            <view class="text" v-if="info !==''">
                {{info}}
            </view>
            <view v-else class="placeholder">
                {{placeholder}}
            </view>
            <uni-icons :type="show? 'top' : 'bottom'" size="14" color="#999" />
        </view>
        <MoMoMultipleSelect v-model="show" :data="list" :default-selected="defaultSelected" @confirm="confirm"
            :allShow="false">
        </MoMoMultipleSelect>
    </view>
</template>

<script>
    import MoMoMultipleSelect from "./momo-multiple-select/index";

    export default {
        name: 'MultipleSelect',
        components: {
            MoMoMultipleSelect,
        },
        props: {
            value: {
                type: Array,
                default: () => {
                    return [];
                }
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            list: {
                type: Array,
                default: () => {
                    return [];
                }
            }
        },
        data() {
            return {
                show: false,
                info: "",
                defaultSelected: [], //默认选中项
            };
        },
        methods: {
            confirm(value) {
                this.defaultSelected = value;
                this.info = value.map((el) => el.label).join(",");
                this.$emit('input', value.map((el) => el.value));
            },
        },
    }
</script>

<style scoped lang="scss">
    .my-multiple-select {
        height: 8rem;
        width: 100%;
        position: relative;

        .input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #ccc;
            border-radius: 1rem;
            padding: 0 2rem;
            font-size: 2rem;

            .text {
                font-size: 2rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0 2rem 0 0;
            }

            .placeholder {
                font-size: 2rem;
                color: #c0c4cc;
            }

            .uni-icons {
                font-size: 3rem !important;
                line-height: 3rem !important;
            }
        }
    }
</style>